<style>
body {
  min-width:357px;
  overflow-x:hidden;
}

img {
  margin:5px;
  border:2px solid black;
  vertical-align:middle;
  width:75px;
  height:75px;
}
</style>

<script>
var req = new XMLHttpRequest();

var baseUrl = 'https://chrome2sms.appspot.com';
var sendUrl = baseUrl + "sendsms";

var ERROR_STATUS = "ERROR";
var DEVICE_NOT_REGISTERED_STATUS = "DEVICE_NOT_REGISTERED";
var OK_STATUS = "OK";
var LOGIN_REQUIRED_STATUS = "LOGIN_REQUIRED";

function loadHandler(){

}

function sendMessage(){
	var message = document.getElementById("txtMessage").value;
	var phoneNumber = document.getElementById("txtPhoneNumber").value;

	req.open('POST', sendUrl, true);
	req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
	req.setRequestHeader('X-Same-Domain', 'true');  // XSRF protector

	req.onreadystatechange = function(){
		if (this.readystate == 4){
			if (req.status == 200){
				var body = req.responseText;
				if (body.indexOf(OK_STATUS) == 0){
					processResponse(OK_STATUS);
				} else if (body.indexOf(LOGIN_REQUIRED_STATUS) == 0){
					processResponse(LOGIN_REQUIRED_STATUS);
				} else if (body.indexOf(DEVICE_NOT_REGISTERED_STATUS) == 0){
					processResponse(DEVICE_NOT_REGISTERED_STATUS);
				}
			} else{
				processResponse(ERROR_STATUS)
			}
		}
	}
}

function processResponse(status){
	alert(status);
}

</script>

<body onload="loadHandler()">
	<form action="">
		Number:
		<input type="text" id="txtPhoneNumber" name="number" > <br />
		Message:
		<input type="text" id="txtMessage" name="message" > <br />
		<input type="submit" value="Send" onclick="sendMessage()">
	</form>
</body>